<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="./js/xiaoming.js"></script>
  <script src="./js/lilei.js"></script>
  <script src="./js/xm_util.js"></script>


  <button class="btn">按钮1</button>
  <button class="btn">按钮2</button>
  <button class="btn">按钮3</button>
  <button class="btn">按钮4</button>
  <script>

    // 1.普通函数的使用过程
    // function foo() {
    //   console.log("foo函数被执行~")
    // }
    // foo()
    // foo(); // 一条语句后面跟()[]{}时，不加;浏览器会将它们当作一个整体来执行

    // 2.定义函数, 定义完这个函数之后, 会要求这个函数立即被执行
    // {} 代码块/对象类型
    // () 控制优先级(2+3)*5/函数的调用/函数的参数
    // [] 定义数组/从数组-对象中取值/对象的计算属性
    // 立即执行函数(常用的写法)
    (function () {
      console.log("立即执行函数被调用~")
    })();

    // 3.立即执行函数的参数和返回值
    var result = (function (name) {
      console.log("函数立刻被执行~", name)
      return "Hello World"
    })("Lily")
    console.log(result);

    // 应用场景一: 防止全局变量的命名冲突

    // 立即执行函数和普通的代码有什么区别?
    // 在立即执行函数中定义的变量是有自己的作用域的
    (function () {
      var message = "Hello World"
      // console.log(message)
    })();
    // console.log(message)
    // var message = "Hello World"
    // console.log(message)

    // 1.获取一个按钮监听点击
    // 1.拿到html元素
    // var btnEl = document.querySelector(".btn")
    // console.log(btnEl)
    // // 2.监听对应按钮的点击
    // btnEl.onclick = function() {
    //   console.log("点击了按钮1")
    // }

    // 2.获取所有的按钮监听点击
    // 没有使用立即执行函数
    debugger
    // var btnEls = document.querySelectorAll(".btn")
    // for循环没有自己的作用域（es5之前）
    // 解决方案：使用let定义i(es6)
    // for (var i = 0; i < btnEls.length; i++) {
    //   var btn = btnEls[i];
    // 只有在点击时才执行此函数
    //   btn.onclick = function() {
    //     console.log(`按钮${i+1}发生了点击`)
    //   }
    // }

    // 使用立即执行函数
    var btnEls = document.querySelectorAll(".btn")
    for (var i = 0; i < btnEls.length; i++) {
      var btn = btnEls[i];
      // 一进入循环就开始立即调用 并传入参数i i是实参 m是形参
      (function (m) {
        btn.onclick = function () {
          console.log(`按钮${m + 1}发生了点击`)
        }
      })(i)
    }

    console.log(i) //4


      // 1.常见的写法
      // (function() {
      //   console.log("立即执行函数被调用~")
      // })()


      // 2.错误的写法 函数声明不能被立即调用 函数表达式才能
      // () -> 优先级的()
      // function foo() {
      // }()

      // 3.其他写法
      // 匿名函数
      (function (fn) {
        console.log("立即执行函数被调用")
      }());

    // +(正号)-(符号)!(取反) - 了解 转换成表达式 
    +function foo() { }()

  </script>

</body>

</html>